<template>
  <!-- 库区管理 -->
  <div>
    <!-- 搜索 -->
    <Item
      :table-data="tableData"
      :data-max="dataMax"
      :title-obj="titleObj"
      :arr="arr"
      :name-list="nameList"
      @submit="submit"
      @publicFn="publicFn"
      @use="use"
      @add="add"
    />

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>确定要{{ row.status===0?'启用':'停用' }}{{ row.name }}吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Item from '../components/Item.vue'
import { detailedLoc, delStorehouse, ModifyLoc } from '@/api'
export default {
  components: {
    Item
  },
  data() {
    return {
      nameList: ['库区名称', '库位名称', '库位状态'],
      arr: ['所属仓库', '库区编号', '库区名称', '库位编号',
        '库位名称', '温度类型', '承重类型', '用途属性', '停用状态', '承载上限', '更新时间'],
      titleObj: {
        '所属仓库': 'warehouseName',
        '库区编号': 'code',
        '库区名称': 'areaName',
        '库位编号': 'code',
        '库位名称': 'name',
        '温度类型': 'useType',
        '承重类型': 'bearingType',
        '用途属性': 'personName',
        '停用状态': 'status',
        '承载上限': 'maxNum',
        '更新时间': 'updateTime'
      },
      row: {},
      dialogVisible: false,
      form: {
        areaName: '', // 库区名称
        name: '', // 库位名称
        status: null, // 状态
        current: 1, // 页
        size: 10 // 数量
      },
      input: '',
      tableData: [], // 渲染表格的数据
      dataMax: {} // 全部数据

    }
  },
  created() {
    this.publicFn(this.form)
  },
  methods: {
    add(row, tableData) {
      // 添加
      this.$router.push({
        path: '/add2',
        query: {
          tableData: tableData,
          rows: row
        }
      })
    },
    async submit() {
      this.row.status === 0 ? this.row.status = 1 : this.row.status = 0
      await ModifyLoc({ id: this.row.id, status: this.row.status })
      this.dialogVisible = false
      this.publicFn()
      this.$message.success('改变状态成功')
    },
    use(row) {
      this.dialogVisible = true
      console.log(row)
      this.row = row
    },
    // 改变状态的关闭方法
    handleClose() {
      this.dialogVisible = false
    },
    handleClick(row) {
      // 编辑
      this.$router.push({
        path: '/add3',
        query: {
          row: row
        }
      })
    },
    delite(row) {
      // 删除
      this.$confirm('真的要删除吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 删除
        console.log(row)
        await delStorehouse(row.id)
        this.$message.success('删除成功')
        // this.publicFn()
      }).catch(error => {
        console.log(error)
      })
    },
    // 公共方法
    async publicFn(obj) {
      this.form = {
        areaName: obj.one, // 库区名称
        name: obj.tow, // 库位名称
        size: obj.size, // 数量
        current: obj.current, // 页
        status: obj.status // 状态
      }

      const { data } = await detailedLoc({ ...this.form })
      console.log(data)
      this.tableData = data.data.records
      console.log(this.tableData)
      this.dataMax = data.data
    }
  }
}
</script>

<style lang="scss" scoped>

  .divContent{
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    // height: 449px;
  }
  .bottom{
    margin-top: 20px;
    display: flex;
    text-align: center;
    margin-left: 480px;
  }
  .ipt{
    width: 40px;
    height: 20px;
  }
  .divHead{
    div {
      font-size: 12px;
      color: #887e7e;
      margin-bottom: 12px;
    }
  }
</style>
